<template>
  <div
    class="data-details-container animate__faster animate__animated animate__fadeIn"
  >
    <div class="header" header="数据明细">
      <a-button class="back-button" @click="gotoBack()"> 返回 </a-button>
    </div>
    <div class="main">
      <!-- 温度趋势图  -->
      <div class="chart-dom">
        <div class="echarts-title">温度趋势图</div>
        <a-empty v-if="empty" />
        <div
          class="echarts-container"
          ref="temperature-trend"
          v-show="!empty"
        ></div>
      </div>
      <!-- 湿度趋势图 -->
      <div class="chart-dom">
        <div class="echarts-title">湿度趋势图</div>
        <a-empty v-if="empty" />
        <div
          class="echarts-container"
          ref="humidity-trend"
          v-show="!empty"
        ></div>
      </div>

      <!-- 实时数据  -->
      <div class="table-container">
        <div class="table-title">实时数据</div>
        <div class="list" v-loading="loading">
          <vxe-table
            ref="xTable"
            height="400px"
            class="scrollbarStyle"
            align="center"
            show-overflow
            show-header-overflow
            :data="tableData"
            :column-config="{ resizable: true }"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column field="dicDesc" title="生产线" width="100">
            </vxe-column>
            <vxe-column field="equName" title="设备名称" width="100">
            </vxe-column>
            <vxe-column field="componentParts" title="梁号" width="100">
            </vxe-column>
            <vxe-column field="curingstate" title="蒸养房启动状态" width="150">
              <template #default="{ row }">
                {{ row.curingstate == "true" ? "是" : "否" }}
              </template>
            </vxe-column>
            <vxe-column field="workstate" title="蒸养运行状态" width="150">
              <template #default="{ row }">
                {{ row.workstate == "true" ? "是" : "否" }}
              </template>
            </vxe-column>
            <vxe-column field="settemp" title="蒸养设定温度(℃)" width="150">
            </vxe-column>
            <vxe-column
              field="risetempstate"
              title="蒸养升温运行状态"
              width="150"
            >
              <template #default="{ row }">
                {{ row.risetempstate == "true" ? "是" : "否" }}
              </template>
            </vxe-column>
            <vxe-column
              field="constanttempstate"
              title="蒸养恒温运行状态"
              width="150"
            >
              <template #default="{ row }">
                {{ row.constanttempstate == "true" ? "是" : "否" }}
              </template>
            </vxe-column>
            <vxe-column
              field="lowertempstate"
              title="蒸养降温运行状态"
              width="150"
            >
              <template #default="{ row }">
                {{ row.lowertempstate == "true" ? "是" : "否" }}
              </template>
            </vxe-column>
            <vxe-column
              field="risetempsitehour"
              title="蒸养升温时间设定(h)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="risetempsiteminute"
              title="蒸养升温时间设定(mm)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="constanttempsitehour"
              title="蒸养恒温时间设定(h)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="constanttempsiteminute"
              title="蒸养恒温时间设定(mm)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="lowertempsitehour"
              title="蒸养降温时间设定(h)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="lowertempsiteminute"
              title="蒸养降温时间设定(mm)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="risetemprunhour"
              title="蒸养升温运行时间(h)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="risetemprunminute"
              title="蒸养升温运行时间(mm)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="constanttemprunhour"
              title="蒸养恒温运行时间(h)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="constanttemprunminute"
              title="蒸养恒温运行时间(mm)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="lowertemprunhour"
              title="蒸养降温运行时间(h)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="lowertemprunminute"
              title="蒸养降温运行时间(mm)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="worktimehour"
              title="蒸养运行总时间(h)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="worktimeminute"
              title="蒸养运行总时间(mm)"
              width="180"
            >
            </vxe-column>
            <vxe-column field="openangle" title="蒸养房阀门开合度" width="150">
            </vxe-column>
            <vxe-column field="spraystate" title="喷淋运行状态" width="180">
              <template #default="{ row }">
                {{ row.spraystate == "true" ? "是" : "否" }}
              </template>
            </vxe-column>
            <vxe-column
              field="spraysettime"
              title="喷淋阀运行间隔时间设定(mm)"
              width="220"
            >
            </vxe-column>
            <vxe-column
              field="spraytimehour"
              title="喷淋运行总时间(h)"
              width="180"
            >
            </vxe-column>
            <vxe-column
              field="spraytimeminute"
              title="喷淋运行总时间(mm)"
              width="180"
            >
            </vxe-column>
            <vxe-column field="tempsite1" title="位置1温度(℃)" width="150">
            </vxe-column>
            <vxe-column field="tempsite2" title="位置2温度(℃)" width="150">
            </vxe-column>
            <vxe-column field="tempsite3" title="位置3温度(℃)" width="150">
            </vxe-column>
            <vxe-column field="humsite1" title="位置1湿度(%RH)" width="150">
            </vxe-column>
            <vxe-column field="humsite2" title="位置2湿度(%RH)" width="150">
            </vxe-column>
            <vxe-column field="humsite3" title="位置3湿度(%RH)" width="150">
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHealthDetail } from "@/api/wisdom-beam/collect-app.js";
export default {
  data() {
    return {
      tableData: [],
      echartData: [],
      empty: false,
      loading: false,
      chartInstance1: null,
      chartInstance2: null,
    };
  },
  updated() {
    if (this.chartInstance1) {
      this.chartInstance1.resize();
    }
    if (this.chartInstance2) {
      this.chartInstance2.resize();
    }
  },
  mounted() {
    sessionStorage.setItem("SEARCH_FLAG", true);
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      let { prodLineNum, componentParts } = this.$route.query;
      getHealthDetail({ prodLineNum, componentParts, equType: "17" })
        .then((res) => {
          let { data } = res;
          this.tableData = data.result;
          let chart = data.result || [];
          chart.forEach((item) => this.echartData.unshift(item));
          this.$nextTick(() => {
            this.getTemperature();
            this.getHumidity();
          });
        })
        .catch((_) => {
          this.tableData = [];
          this.echartData = [];
          this.empty = true;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //温度趋势图
    getTemperature() {
      let chart_dom = this.$refs["temperature-trend"];
      this.chartInstance1 = this.$echarts.init(chart_dom);
      let x = [];
      let seriesData1 = [];
      let seriesData2 = [];
      let seriesData3 = [];
      let time = "";
      if (this.echartData.length == 0) {
        this.empty = true;
      } else {
        this.empty = false;
        time =
          this.echartData?.[0].colTime +
          "~" +
          this.echartData?.[this.echartData.length - 1].colTime;
      }
      this.echartData.forEach((item) => {
        x.push(item.colTime);
        seriesData1.push(item.tempsite1);
        seriesData2.push(item.tempsite2);
        seriesData3.push(item.tempsite3);
      });

      let option = {
        color: ["#F26D7C", "#2EA2F7", "#2EA245"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "5%",
          right: "30",
          bottom: "40",
          top: "80",
        },
        legend: {
          top: "40",
          right: "30",
          icon: "rect",
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            color: "#525A5D",
            fontSize: "16",
          },
        },
        xAxis: [
          {
            type: "category",
            data: x,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              color: "#8C8C8C",
              margin: 16,
            },
            axisLine: {
              lineStyle: {
                color: "#333333",
              },
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: time,
            nameTextStyle: {
              align: "left",
              color: "#999999",
              fontSize: "14",
              padding: [0, 0, 0, -52], // 上右下左与原位置距离
            },
            nameGap: 22,
            splitNumber: 5,
            axisLabel: {
              color: "#999999",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            symbol: "circle",
            name: "位置1温度",
            type: "line",
            data: seriesData1,
          },
          {
            symbol: "circle",
            name: "位置2温度",
            type: "line",
            data: seriesData2,
          },
          {
            symbol: "circle",
            name: "位置3温度",
            type: "line",
            data: seriesData3,
          },
        ],
      };
      this.chartInstance1.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartInstance1.resize();
      });
    },
    //湿度趋势图
    getHumidity() {
      let chart_dom = this.$refs["humidity-trend"];
      this.chartInstance2 = this.$echarts.init(chart_dom);
      let x = [];
      let seriesData1 = [];
      let seriesData2 = [];
      let seriesData3 = [];
      let time = "";
      if (this.echartData.length == 0) {
        this.empty = true;
      } else {
        this.empty = false;
        time =
          this.echartData?.[0].colTime +
          "~" +
          this.echartData?.[this.echartData.length - 1].colTime;
      }
      this.echartData.forEach((item) => {
        x.push(item.colTime);
        seriesData1.push(item.humsite1);
        seriesData2.push(item.humsite2);
        seriesData3.push(item.humsite3);
      });

      let option = {
        color: ["#F26D7C", "#2EA2F7", "#2EA245"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "5%",
          right: "30",
          bottom: "40",
          top: "80",
        },
        legend: {
          top: "40",
          right: "30",
          icon: "rect",
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            color: "#525A5D",
            fontSize: "16",
          },
        },
        xAxis: [
          {
            type: "category",
            data: x,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              color: "#8C8C8C",
              margin: 16,
            },
            axisLine: {
              lineStyle: {
                color: "#333333",
              },
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: time,
            nameTextStyle: {
              align: "left",
              color: "#999999",
              fontSize: "14",
              padding: [0, 0, 0, -52], // 上右下左与原位置距离
            },
            nameGap: 22,
            splitNumber: 5,
            axisLabel: {
              color: "#999999",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            symbol: "circle",
            name: "位置1湿度",
            type: "line",
            data: seriesData1,
          },
          {
            symbol: "circle",
            name: "位置2湿度",
            type: "line",
            data: seriesData2,
          },
          {
            symbol: "circle",
            name: "位置3湿度",
            type: "line",
            data: seriesData3,
          },
        ],
      };
      this.chartInstance2.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartInstance2.resize();
      });
    },
    //返回
    gotoBack() {
      this.$router.push({
        path: `/nebula/wisdom-beam-app/steamCuring`,
      });
    },
  },
  destroyed() {
    this.chartInstance1 && this.chartInstance1.dispose();
    this.chartInstance2 && this.chartInstance2.dispose();
  },
};
</script>

<style lang="less" scoped>
.data-details-container {
  height: 100%;
  padding: 10px 0 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 11px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
    .back-button {
      color: var(--primary-color);
      background: #f1f2f7 !important;
      border: none;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    overflow-x: hidden !important;
    .flex();
    flex-direction: column;
    .chart-dom {
      flex-shrink: 0;
      height: 280px;
      border-bottom: 2px solid #f3f4f6;
      position: relative;
      .echarts-title {
        position: absolute;
        top: 10px;
        left: 30px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        color: #525a5d;
        &::after {
          content: attr(unit);
          color: #999da5;
          font-size: 14px;
        }
      }
      .echarts-container {
        height: 100%;
        width: 100%;
      }
    }
    .table-container {
      flex-shrink: 0;
      flex: 1;
      .flex();
      flex-direction: column;
      .table-title {
        padding: 10px 30px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        color: #525a5d;
      }
      .list {
        flex: 1;
        height: 100%;
      }
      .pager-container {
        flex-shrink: 0;
      }
    }
  }
}
</style>
